<template>
    <div style="background-color: white;width: 1500px;margin: auto">
        <Header headerClass="about-div"/>
        <div style="height: 100px;width: 1500px"></div>
        <div v-if="videoArr.length!==0" style="width: 1260px; margin: auto;min-height: 100vh">
            <div class="home-bottom-grid" >
                <div class="video_grid" v-for="item in videoArr">
                    <router-link :to="'/detail?id='+item.id">
                        <div style="width: 100%;height: 100%">
                            <div style="height: 133px;border-radius: 5px;overflow: hidden; ">
                                <img :src="item.coverUrl" class="gallery__img" alt="封面图片损坏" style="width:100%">
                            </div>
                            <p class="title_p">{{ item.title }}</p>
                        </div>
                    </router-link>
                </div>
                <br>
            </div>
            <el-pagination background layout="total, prev, pager, next, jumper"
                           :total="totalVideos" :page-size="20"
                           :current-page.sync="currentPage" @current-change="handlePageChange"/>
        </div>
        <el-empty v-else description="暂无数据"
                  style="border: #99a9bf solid 1px;width: 800px;height: 600px;margin: auto"/>
    </div>



</template>

<script setup>
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
import TokenAxios from "@/http/request/TokenAxios";
import Header from "@/components/Header.vue";


const videoArr=ref([])

const currentPage = ref(1);

const totalVideos = ref(0);


const handlePageChange = (newPage) => {
    currentPage.value = newPage;
    let id = new URLSearchParams(location.search).get('id');
    categoryVideoList(id);
};

const categoryVideoList=(id)=>{
    // router.push('/categoryVideo?id='+id)

    TokenAxios.get(`http://124.71.182.39:26000/video/parentCategory/${id}/list?page=${currentPage.value}`)
        .then((response)=>{
            if (response.state===20000){
                totalVideos.value = response.data.total;
                videoArr.value = response.data.list;
            }else {
                ElMessage.error(response.message)
            }

        })
}

onMounted(()=>{
    let id = new URLSearchParams(location.search).get('id');
    categoryVideoList(id);
})
</script>

<style scoped>
.home-bottom-grid{
    width: 230px;
    line-height: 40px;
    /* 声明一个容器 */
    display: grid;
    /*  声明列的宽度  */
    grid-template-columns: repeat(5, 236px);
    /*  声明行间距和列间距  */
    grid-gap: 20px;
    /*  声明行的高度  */
    grid-template-rows: 220px 220px;
}

.video_grid{
    text-align: left;
    height: 220px;
}

a {
    text-decoration: none; /* 去掉下划线 */
    color: inherit; /* 继承父元素的颜色，保持与文本颜色一致 */
    transition: color 1s; /* 设置颜色过渡效果，持续时间为 2 秒 */
}
.title_p {
    font-weight: bold;
    line-height: 1.3;
    margin: 10px 0 ;
    height: 40px;
    overflow: hidden; /*超出不显示*/
    /*设置省略号相关样式*/
    display: -webkit-box;
    -webkit-line-clamp: 2; /*设置行数*/
    -webkit-box-orient: vertical; /*纵向*/
}
a:hover {
    color: #15b6ea; /* 鼠标悬浮时变为蓝色 */
}

</style>